.userinfo-page {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	.userinfo-container {
		display: flex;
		align-items: center;
	}
	.user-header {
		width: 100px;
		height: auto;
		overflow: hidden;
		position: relative;
		.user-img {
			width: 100%;
			height: 100px;
			border-radius: 50%;
			border: 1px solid #ccc;
		}
		.user-img-cover {
			cursor: pointer;
			position: absolute;
			transition: all 0.2s linear;
			left: 0;
			top: 0;
			right: 0;
			bottom: calc(100% - 100px);
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0);
			border-radius: 50%;
			color: transparent;
			&:hover {
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
			}
		}
		.name {
			padding-top: 10px;
			text-align: center;
			font-size: 14px;
		}
	}
	.info-box {
		width: 250px;
		margin-left: 20px;
	}
	.info-item {
		box-sizing: border-box;
		padding: 5px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ccc;
		margin-bottom: 5px;
		.cont {
			flex: 1;
		}
		.name {
			margin-right: 10px;
		}
		.icon {
			cursor: pointer;
			&:hover {
				color: #1890ff;
			}
		}
	}
}
